<style lang="less">

</style>

<template>

    <Modal width="768"
           v-model="modalShow"
           title="选择服务"
    >
        <Row>
            <Card>
                <div class="fitter-panel">
                    <i-input style="width: 260px" placeholder="请输入关键字" v-model="keyword">
                    </i-input>

                    <p>服务类别</p>
                    <i-select placeholder="服务类别" v-model="pid" clearable
                              style="width:240px">
                        <i-option v-for="item in services_menus" :value="item.id" :key="item.id">
                            {{item.name}}
                        </i-option>
                    </i-select>
                    <div style="flex: 1">

                    </div>
                    <i-button @click="loadServices()" type="primary" icon="search" style="margin-left: 16px;">搜索
                    </i-button>
                </div>

                <div class="table-content">
                    <Table height="500" no-data-text="没有符合条件的服务信息"
                           :loading="loading" border :columns="columns" :data="services"></Table>

                </div>
                <div style="margin: 10px;">
                    <Page @on-page-size-change="changePageSize" :pageSize="size" :current.sync="page"
                          @on-change="changePage" :total="total" show-elevator show-sizer></Page>
                </div>
            </Card>
        </Row>
        <div slot="footer">
        </div>
    </Modal>

</template>

<script type="text/jsx">
  import E from 'wangeditor'
  import url from '@/config/url'

  export default {
    name: 'select-service-modal',
    props: {
      selectShow: Boolean,
      default () {
        return false
      }
    },
    computed: {
      modalShow: {
        get () {
          return this.selectShow
        },
        set (newValue) {
          this.$emit('update:selectShow', newValue)
        }
      }
    },
    data () {
      return {
        columns: [

          {
            title: 'ID',
            width: 60,
            align: 'center',
            key: 'id'
          },
          {
            title: '名称',
            width: 120,
            align: 'center',
            key: 'name'
          },
          {
            title: '上级分类',
            width: 160,
            align: 'center',
            key: 'parent_label',
            render: (h, params) => {
              return (
                      <div>
                          <tag type="dot" color="blue">{params.row.parent_label}</tag>
                      </div>
              )
            }
          },
          {
            title: '简介',
            align: 'left',
            key: 'description'
          },
          {
            width: 160,
            title: '预估价格',
            align: 'left',
            key: 'price'
          },
          {
            title: '操作',
            width: 140,
            key: 'action',
            render: (h, params) => {

              return (
                      <div>
                          <poptip transfer={true} onOn-ok={() => {
                            console.log('delete')
                            this.selectClick(params.row)
                          }} confirm title="您确认选择这条内容吗？">
                              <i-button size="small" style="margin-left:10px;"
                                        type="error">选择
                              </i-button>
                          </poptip>

                      </div>
              )
            }
          }
        ],
        show: true,
        loading: false,
        type: 'name',
        visible: false,
        showCreate: false,
        keyword: '',
        created_at: [],
        role_type: '',
        services: [],
        services_menus: [],
        pid: '',
        page: 1,
        size: 10,
        total: 0,
        multipleSelection: [],
      }
    },
    methods: {
      loadServices () {
        this.loading = true
        let params = {page: this.page, size: this.size}
        if (this.keyword) {
          params.keyword = this.keyword
        }
        $api.get(url.service, {
          params: params
        }).then((res) => {
          this.loading = false
          let results = []
          this.page = res.page.current
          this.total = res.page.total
          res.data.forEach((item) => {
            item.parent_label = item.parent ? item.parent.name : '顶级分类'
            results.push(item)
          })
          this.services = results
          console.log(results)
        }).catch((error) => {
          console.log(error)
          this.loading = false
        })
      },
      changePage (value) {
        this.loadServices()
      },
      selectClick (value) {
        let page = '/pages/service/service?id='+value.id+"&pid="+value.pid
        this.modalShow = false
        this.$emit('onSelect', page)
      },
      changePageSize (value) {
        this.size = value
        this.loadServices()
      },
      loadMenus () {
        $api.get(url.service_menus).then((res) => {
          if (res.status) {
            this.services_menus = []
            this.services_menus.push({name: '顶级分类', id: 0})
            this.services_menus = this.services_menus.concat(res.data)
          }
        })
      },
    },
    mounted () {
      this.loadServices()
      this.loadMenus()
    },
    destroyed () {
    }
  }
</script>

<style lang="less" scoped>
    .fitter-panel {
        background: #f0f0f0;
        padding: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        p {
            font-size: 12px;
            margin-left: 12px;
            margin-right: 12px;
        }
    }

    .button-group-panel {
        margin-top: 12px;
    }

    .table-content {
        margin-top: 12px;
    }
</style>
